function button1Click() {
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    // 发送AJAX请求到后端API

    fetch(`/system/data/get1`)
        .then(response => response.json()) // 解析JSON响应
        .then(data => {

            // 指定配置和数据
            var option = {

                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#24F0E4'},
                        {offset: 1, color: '#1D82FF'}
                    ],
                    false),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // name: '时间',
                        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: "rgb(255,255,255)",
                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'NDBSI指标',
                        axisLabel: {
                            color: "rgb(255,255,255)",

                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }

                    }
                ],
                //if(index==1)
                series: [
                    {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data:[data[1],data[6],data[11],data[16],data[21],data[26],data[31],data[36],data[41],data[46],data[51]]

                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function button2Click() {
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    // 发送AJAX请求到后端API

    fetch(`/system/data/get1`)
        .then(response => response.json()) // 解析JSON响应
        .then(data => {

            // 指定配置和数据
            var option = {

                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#24F0E4'},
                        {offset: 1, color: '#1D82FF'}
                    ],
                    false),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // name: '时间',
                        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: "rgb(255,255,255)",
                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'NDVI指标',
                        axisLabel: {
                            color: "rgb(255,255,255)",

                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }

                    }
                ],
                //if(index==1)
                series: [
                    {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data:[data[2],data[7],data[12],data[17],data[22],data[27],data[32],data[37],data[42],data[47],data[52]]

                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function button3Click() {
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    // 发送AJAX请求到后端API

    fetch(`/system/data/get1`)
        .then(response => response.json()) // 解析JSON响应
        .then(data => {

            // 指定配置和数据
            var option = {

                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#24F0E4'},
                        {offset: 1, color: '#1D82FF'}
                    ],
                    false),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // name: '时间',
                        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: "rgb(255,255,255)",
                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'WET指标',
                        axisLabel: {
                            color: "rgb(255,255,255)",

                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }

                    }
                ],
                //if(index==1)
                series: [
                    {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data:[data[3],data[8],data[13],data[18],data[23],data[28],data[33],data[38],data[43],data[48],data[53]]

                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function button4Click() {
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    // 发送AJAX请求到后端API

    fetch(`/system/data/get1`)
        .then(response => response.json()) // 解析JSON响应
        .then(data => {

            // 指定配置和数据
            var option = {

                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#24F0E4'},
                        {offset: 1, color: '#1D82FF'}
                    ],
                    false),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // name: '时间',
                        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: "rgb(255,255,255)",
                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'LST指标',
                        axisLabel: {
                            color: "rgb(255,255,255)",

                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }

                    }
                ],
                //if(index==1)
                series: [
                    {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data:[data[4],data[9],data[14],data[19],data[24],data[29],data[34],data[39],data[44],data[49],data[54]]

                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
// 柱状图1模块
(function () {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    // 发送AJAX请求到后端API
    fetch('/system/data/get1')
        .then(response => response.json()) // 解析JSON响应
        .then(data => {

            // 指定配置和数据
            var option = {

                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#24F0E4'},
                        {offset: 1, color: '#1D82FF'}
                    ],
                    false),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // name: '时间',
                        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: "rgb(255,255,255)",
                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'NDBSI指标',
                        axisLabel: {
                            color: "rgb(255,255,255)",

                            fontSize: 12
                        },
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.99)',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }

                    }
                ],
                //if(index==1)
                series: [
                    {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data:[data[1],data[6],data[11],data[16],data[21],data[26],data[31],data[36],data[41],data[46],data[51]]

                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 柱状图2模块
(function () {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));
    // 指定配置和数据
    var option = {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
                {offset: 0, color: '#24F0E4'},
                {offset: 1, color: '#1D82FF'}
            ],
            false),
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '20%',
            left: '8%',
            right: '15%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                name: '等级',
                data: ['优', '良', '中', '较差', '差'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "rgb(255,255,255)",
                    fontSize: 12
                },
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.99)',
                    fontSize: 12,
                    fontWeight: 'bolder'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '评估面积统计',
                min: 0,
                max: 10,
                axisLabel: {
                    formatter: '{value} ',//单位
                    align: 'center',
                    color: "rgb(255,255,255)",
                    fontSize: 12
                },
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.99)',
                    fontSize: 12,
                    fontWeight: 'bolder'
                }
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [0.79, 7.88, 9.46, 5.72, 2.03]
            }
        ]
    };
    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 折线图1模块
(function () {
    var myChart = echarts.init(document.querySelector(".line1 .chart"));
    var option = {
        grid: {
            top: '20%',
            bottom: '30%',
        },
        xAxis: {
            type: 'category',
            data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
            axisLabel: {
                color: "rgb(255,255,255)",
                fontSize: 12
            },
            nameTextStyle: {
                color: 'rgba(255,255,255,0.99)',
                fontSize: 12,
                fontWeight: 'bolder'
            }
        },
        yAxis: {
            type: 'value',
            name: 'RESI历年变化趋势',
            axisLabel: {
                color: "rgb(255,255,255)",
                fontSize: 12
            },
            nameTextStyle: {
                color: 'rgba(255,255,255,0.99)',
                fontSize: 12,
                fontWeight: 'bolder'
            }
        },
        series: [
            {
                data: [0.48, 0.64, 0.36, 0.30, 0.46, 0.17, 0.69, 0.27, 0.37, 0.48, 0.77],
                type: 'line'
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 折线图2模块
(function () {
    var myChart = echarts.init(document.querySelector(".line2 .chart"));
    var option = {
        grid: {
            top: '20%',
            bottom: '30%',
            left: '13%',
        },
        xAxis: {
            type: 'category',
            data: ['2023/3', '2023/4', '2023/5', '2023/6', '2023/7', '2023/8', '2023/9', '2023/10', '2023/11', '2023/12', '2024/1'],
            axisLabel: {
                color: "rgb(255,255,255)",
                fontSize: 12
            },
            nameTextStyle: {
                color: 'rgba(255,255,255,0.99)',
                fontSize: 12,
                fontWeight: 'bolder'
            }
        },
        yAxis: {
            name: '生态趋势预测',
            type: 'value',
            axisLabel: {
                color: "rgb(255,255,255)",
                fontSize: 12
            },
            nameTextStyle: {
                color: 'rgba(255,255,255,0.99)',
                fontSize: 12,
                fontWeight: 'bolder'
            }
        },
        series: [
            {
                data: [0.41, 0.67, 0.34, 0.21, 0.46, 0.12, 0.43, 0.24, 0.37, 0.61, 0.72],
                type: 'line'
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
